// 引入基类
import cinemasApi from "../../api/cinemas.js";
import Base from "../base.js";




export default class extends Base {
    data = {
        cinemas: {
            _id: "",
            name: "",
            phone: "",
            address: "",
            status: ""
        },
    }


    //渲染数据
    render() {
        this.$el.html(
            `
        <h1 style="margin:20px auto;width:140px;font-weight:bold;">新增影院</h1>
        <form class="layui-form" style="width:513px;flex-flow:wrap;margin:auto;border: groove;padding:50px 100px;">
          <div class="layui-form-item">
            <label class="layui-form-label" style="padding: 9px 0;margin-bottom:25px;">影院名</label>
              <div class="layui-input-block">
          <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
         </div>

        <div class="layui-form-item">
        <label class="layui-form-label" style="padding: 9px 0;margin-bottom:25px;">影院地址</label>
         <div class="layui-input-block">
         <input type="text" name="address" placeholder="请输入" autocomplete="off" class="layui-input">
         </div>
        </div>

        <div class="layui-form-item">
        <label class="layui-form-label" style="padding: 9px 0;margin-bottom:25px;">联系方式</label>
        <div class="layui-input-block">
        <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
       </div>

       <div class="layui-form-item" id="status">
        <label class="layui-form-label" style="padding: 9px 0;margin-bottom:25px;">是否营业</label>
        <div class="layui-input-block">
        <input type="radio" name="status"  value="false" title="否" id="false" lay-filter="ChoiceRadio">
        <input type="radio" name="status"  value="true"  title="是" id="true" lay-filter="ChoiceRadio">
       </div>
      </div>

       <div style="width: 216px;margin: auto;">
        <div>
        <input type="button" value="新增电影院" id="saveBtn" class="layui-btn">
        <input type="button" value="上传图片" id="upload" class="layui-btn">
       </div>
      </div>
     </form> 
        `
        )

        const form = layui.form;
        form.render();
        // 获取提交键
        this.$submitBtn = $("#saveBtn");
        // 获取上传按钮
        this.$uploadBtn = $("#upload")
        //放映厅名
        this.$name = $("input[name=name]");
        // 影院联系方式
        this.$phone = $("input[name=phone]");
        //影院地址
        this.$address = $("input[name=address]")
        //获取单选框
        this.falseBtn= $("#false");
        this.trueBtn= $("#true")
    }


    //添加数据到数据库
    async addCinemas() {
        const { cinemas } = this.data;
        cinemas.name = this.$name.val();
        cinemas.phone = this.$phone.val();
        cinemas.address = this.$address.val();
        //    const status=`ture`? true.checked=ture: false.checked=true;
        cinemas.status=true;
        
        const { name, phone, address, status } = this.data.cinemas;
        this.data.cinemas = await cinemasApi.add({ name, phone, address, status });
        if (this.data.cinemas) {
            layer.msg(`新增成功`);
        }
        console.log(this.data.cinemas);
    }

    //上传图片到数据库
    upload() {
        location.hash = `#/info/upload/${this.data.cinemas._id}`;
    }

    // 单选框监听事件
    radioHandel() {
        
        console.log('radioHandel');
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        form.on('radio(ChoiceRadio)', function (data) {
            // console.log(data.elem); //得到 radio 原始 DOM 对象
            console.log(typeof data.value); //被点击的 radio 的 value 值

        });
       

    }



    //添加交互事件
    handle() {
        this.$submitBtn.on("click", this.addCinemas.bind(this))
        this.$uploadBtn.on("click", this.upload.bind(this))
        this.trueBtn.on("click",this.radioHandel(this));
        // this.falseBtn.on("click",this.radioHandel(this))
    }

}